<template>
<el-container>
  <el-header>Header</el-header>
  <el-container>
    <el-aside width="200px">
       <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b" :router="true">
           <!--一级菜单-->
           <el-submenu :index="item.id+''" v-for="item in rigthslist" :key="item.id">
             <!--一级菜单模板区域-->
             <template slot="title">
               <!-- 图标-->
               <i class="el-icon-location"></i>
               <!--文本-->
               <span>{{item.name}}</span>
             </template>
             <!--二级菜单 开启路由后访问的地址index：这里的path-->
                 <el-menu-item :index="subItem.path"
                 v-for="subItem in item.children"
                 :key="subItem.id"
                 @click="saveNavState(subItem.path)">
                <template slot="title">
                  <!-- 图标-->
                    <i class="el-icon-menu"></i>
                  <!--文本-->
                  <span>{{subItem.name}}</span>
                </template>

              </el-menu-item>
            </el-submenu>

          </el-menu>
    </el-aside>
    <el-main>
      <!--放一个路由的占位符-->
      <router-view></router-view>
    </el-main>
  </el-container>
</el-container>

</template>

<script>
   export default{
      created(){
        this.getAllRigths()
      },
      data(){
        return{
          rigthslist:[]
        }
      },
     methods:{
      async getAllRigths(){
        const {data:res} =await this.$http.get("http://localhost:8092/rights/getRigths")
        this.rigthslist=res.data
        console.log(this.rigthslist)
       },
       saveNavState(){}

      }
   }
</script>
<style>

</style>
